<template>
  <div>
    <div class="pagination-container">
      <div class="pagination-info">
        <span>共{{ total }}个商品</span>
        <span style="margin-left:10px" v-if="isShowCurrent">第{{ pageTotal ? page_no : '0' }} / {{ pageTotal }}页</span>
      </div>
      <a-pagination :show-quick-jumper="isShowQuickJumper" :pageSizeOptions="pageSizeOptions"
        :showSizeChanger="showSizeChanger" :show-less-items="isShowLess" :page-size="pageSize" :total="props.total"
        :current="page_no" @showSizeChange="onShowSizeChange" @change="onPageChange" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, toRefs } from '@vue/reactivity';
const emits = defineEmits<{
  (emitstr: 'change', emitData: {
    page_no: number;
    page_size: number
  }): void
}>()

const props = withDefaults(
  defineProps<{
    total: number;  // 总条数
    page_no: number; // 当前页
    showSizeChanger?: boolean; // 是否可选择pageSize
    isShowQuickJumper?: boolean,  // 是否可跳转
    isShowCurrent?: boolean,  // 是否显示当前页
    isShowLess?: boolean  // 是否显示较少页面内容	
  }>(),
  {
    total: 0,
    page_no: 1,
    showSizeChanger: true,
    isShowQuickJumper: false,
    isShowCurrent: true,
    isShowLess: false
  }
);
const pageTotal = computed(() => {
  return Math.ceil(props.total / state.pageSize)
})
const state = reactive({
  pageSize: 50,
  pageSizeOptions: ['50', '100']
})
function onShowSizeChange(current: number, pageSize: number) {
  state.pageSize = pageSize
}
// 分页组件修改页码
function onPageChange(page_no: number) {
  const emitData = { page_no, page_size: state.pageSize }
  emits('change', emitData)
  toTop()
}
function toTop() {
  const content = document.getElementById('app')!
  content.scrollTop = 0
}
const { pageSize, pageSizeOptions } = toRefs(state)
</script>

<style scoped lang="less">
.pagination-container {
  margin: 15px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .pagination-info {
    font-size: 14px;
  }
}

.pagination-container :deep(.ant-pagination-options-size-changer.ant-select) {
  margin-right: 0px;
}

.pagination-container :deep(.ant-pagination-options-quick-jumper) {
  margin-left: 10px;
}
</style>